<template>
  <div>
    <div class="outDiv">
      <headerBack></headerBack>
      <scroller style="top: 0.88rem;">
        <div>
          <Header contentTitle="方案记录"></Header>
          <div class="main">
            <div class="cardList" v-show="lens>0">
              <div
                class="cardItem"
                v-for="(item, index) of cardLists"
                :key="index"
                @click="handleCardClick(index,item.id)"
              >
                <div class="line_1">
                  <b>最佳选课方案结果</b>
                  <span>第{{lens-index}}次生成</span>
                </div>
                <div class="line_2">
                  <div class="left">
                    <span>生成时间</span>
                    <span>{{(new Date(item.createTime)).format('yyyy-MM-dd hh:mm')}}</span>
                  </div>
                  <div class="right">
                    <img class="imgIcon" src="~/static/iconsvgs/rightsy.png" alt />
                  </div>
                </div>
                <div class="line_3">
                  <!-- <span>最佳方案数</span>
                  <span>{{item.leng}}</span> -->
                  <span></span>
                  <span></span>
                </div>
              </div>
            </div>
            <div v-show="lens==0" style="text-align: center;font-s0.3rem;margin-top: 3rem;">暂无方案</div>
          </div>
          <div style="width: 100%; height: 10vh;"></div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import Header from "~/components/Header";
import headerBack from "~/components/headerBack";
import { getSchemeRecord, getSchemeRecordResult } from "~/api/selectCourse";
import { format } from "~/plugins/filter";
import ls from "store2";
export default {
  components: {
    Header,
    headerBack
  },
  data() {
    return {
      cardLists: [],
      sendObj: {},
      recodeData: [],
      lens: 1
    };
  },
  created() {
    // this.commonJs.gologins();
  },

  mounted: function() {
    this.getPlanCord();
  },
  methods: {
    getSchemeRecordResult(id) {
      this.$vux.loading.show();
      getSchemeRecordResult(id)
        .then(res => {
          sessionStorage.setItem("electiveData", JSON.stringify(res.data));
          this.$vux.loading.hide();
          this.commonJs.gopush("bestPlan");
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    getPlanCord() {
      this.$vux.loading.show();
      getSchemeRecord(ls.get("userType"))
        .then(res => {
          if (res.code === "0") {
            if (res.data) {
              let $index = null;
              this.cardLists = res.data;
              this.lens = res.data.length;
            }
          }
          this.$vux.loading.hide();
        })
        .catch(error => {
          this.$vux.loading.hide();
        });
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
    handleCardClick(index, id) {
      let num = this.lens - index;
      this.getSchemeRecordResult(id);
    }
    // 数字1~9转换成中文
  }
};
</script>

<style lang="less" scoped>
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;

  .main {
    margin-top: 0.3rem;
    padding: 0 0.3rem;

    .cardList {
      .cardItem {
        padding: 0.3rem;
        margin-bottom: 0.3rem;
        width: 100%;
        height: 2.24rem;
        box-shadow: 0 0 0.2rem 0 rgba(204, 204, 204, 0.3);
        border-radius: 0.1rem;
        border: 0.02 solid #eee;

        .line_1 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.2rem;

          b {
            color: #222;
            font-weight: bold;
            font-size: 0.3rem;
          }

          span {
            display: inline-block;
            width: 1.9rem;
            height: 0.5rem;
            line-height: 0.5rem;
            text-align: center;
            color: #bbb;
            background: #fafafa;
            border-radius: 0.25rem;
            font-size: 0.24rem;
            font-weight: bold;
          }
        }

        .line_2 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.2rem;

          .left {
            color: #999;
            font-size: 0.26rem;
            font-weight: 500;
            line-height: 0.37rem;

            span:first-child {
              margin-right: 0.62rem;
            }
          }
          .imgIcon {
            width: 0.24rem;
            height: 0.24rem;
          }
        }

        .line_3 {
          color: #999;
          font-size: 0.26rem;
          font-weight: 500;
          line-height: 0.37rem;

          span:first-child {
            margin-right: 0.2rem;
          }
        }
      }
    }
  }
}
</style>
